<template>
  <div
    class="team-box"
    :class="{
      download: ['ios', 'android', 'vivo'].indexOf(from) == -1 && down,
    }"
    v-if="!forms.remove && !alldataLoading"
    @click="clickItem"
  >
    <div class="title">
      <img :src="forms.user.image_url" v-if="forms.user" />
      <span v-if="forms.user">{{ forms.user.nickname }}</span>
      <div style="flex: 1"></div>
      <div class="share" v-if="share" @click="shareFun">
        <img src="../../assets/share.svg" alt="" />
        分享
      </div>
    </div>
    <div>
      <forms-ide :edit="false" :forms="forms" :own="own"></forms-ide>
    </div>
    <div class="desc">{{ forms.name }}</div>
    <div class="line"></div>
    <div class="link" v-if="!bottom">
      <a @click="showMore">查看更多配将阵容>></a>
    </div>
    <div class="bottom" v-else>
      <div class="del" @click="remove" v-if="del">
        <img src="../../assets/del.svg" onload="SVGInject(this)" alt="" />
        删除
      </div>
      <div class="own" v-if="own">
        <img src="../../assets/happy.png" v-if="ownNum === 3" alt="" />
        <img src="../../assets/nohappy.png" v-if="ownNum === 2" alt="" />
        <img src="../../assets/cry.png" v-if="ownNum === 1" alt="" />
        {{ ownNum == 1 ? "缺二" : ownNum == 2 ? "缺一" : "可用" }}
      </div>
      <div class="status">
        <div
          class="collec"
          @click="collec"
          :class="{ active: forms.is_collected }"
        >
          <img src="../../assets/star.svg" onload="SVGInject(this)" alt="" />
          收藏 {{ forms.collect_count || "" }}
        </div>
        <div class="like" @click="like" :class="{ active: forms.is_liked }">
          <img src="../../assets/zan.svg" onload="SVGInject(this)" alt="" />
          有用 {{ forms.like_count || "" }}
        </div>
      </div>
    </div>
    <div
      class="download-box"
      @click="download"
      v-if="['ios', 'android', 'vivo'].indexOf(from) == -1 && down"
    >
      <div class="mask"></div>
      <div class="btn">{{ downtext || "推荐阵容请下载GankeAPP查看" }}</div>
    </div>
  </div>
</template>

<script>
import FormsIde from "@/pages/publish/components/FormsIde/index.vue";
import { mapState } from "vuex";
import localStore from "@/libs/util.store";
export default {
  name: "TeamBox",
  props: {
    forms: Object,
    down: {
      type: Boolean,
      default: () => true,
    },
    downtext: String,
    bottom: {
      type: Boolean,
      default: () => false,
    },
    del: {
      type: Boolean,
      default: () => false,
    },
    coll: {
      type: Boolean,
      default: () => false,
    },
    own: {
      type: Boolean,
      default: () => false,
    },
    share: {
      type: Boolean,
      default: () => true,
    },
    heroe: Object,
  },
  model: {
    prop: "forms",
    event: "change",
  },
  components: {
    FormsIde,
  },
  data() {
    return {
      from: "",
      owns: [],
      tactics: {
        main: [], // 主将
        sub1: [], // 副将1
        sub2: [], // 副将2
      },
      books: {
        main: [], // 主将
        sub1: [], // 副将1
        sub2: [], // 副将2
      },
    };
  },
  computed: {
    ...mapState("data", [
      "heroesList",
      "userHeroes",
      "alldataLoading",
      "loginStatus",
    ]),
    ownNum() {
      let forms = this.forms;
      let num = 0;
      if (this.userHeroes.indexOf(forms.chef_hero) !== -1) num++;
      if (this.userHeroes.indexOf(forms.sub_hero_one) !== -1) num++;
      if (this.userHeroes.indexOf(forms.sub_hero_two) !== -1) num++;
      return num;
    },
  },
  created() {
    let forms = this.forms;
    this.from = window.from;

    // 匹配战法
    let tacticsList = window.stateData.tacticsList;
    tacticsList.forEach((item) => {
      let born_ids = item.born_tactic_heroes;

      // 主将
      if (born_ids.indexOf(forms.chef_hero) !== -1)
        this.tactics.main.push(item); // 自带战法
      if (item.id === forms.chef_tactic_one) this.tactics.main.push(item); // 战法2
      if (item.id === forms.chef_tactic_two) this.tactics.main.push(item); // 战法3

      // 副将1
      if (born_ids.indexOf(forms.sub_hero_one) !== -1)
        this.tactics.sub1.push(item); // 自带战法
      if (item.id === forms.sub_one_tactic_one) this.tactics.sub1.push(item); // 战法2
      if (item.id === forms.sub_one_tactic_two) this.tactics.sub1.push(item); // 战法2

      // 副将2
      if (born_ids.indexOf(forms.sub_hero_two) !== -1)
        this.tactics.sub2.push(item); // 自带战法
      if (item.id === forms.sub_two_tactic_one) this.tactics.sub2.push(item); // 战法2
      if (item.id === forms.sub_two_tactic_two) this.tactics.sub2.push(item); // 战法2
    });

    // 匹配兵书
    let booksList = window.stateData.booksList;
    booksList.forEach((item) => {
      // 主将
      if (item.id === forms.chef_book_one) this.books.main.push(item); // 兵书1
      if (item.id === forms.chef_book_two) this.books.main.push(item); // 兵书2
      if (item.id === forms.chef_book_three) this.books.main.push(item); // 兵书2

      // 副将1
      if (item.id === forms.sub_one_book_one) this.books.sub1.push(item); // 兵书1
      if (item.id === forms.sub_one_book_two) this.books.sub1.push(item); // 兵书2
      if (item.id === forms.sub_one_book_three) this.books.sub1.push(item); // 兵书2

      // 副将2
      if (item.id === forms.sub_two_book_one) this.books.sub2.push(item); // 兵书1
      if (item.id === forms.sub_two_book_two) this.books.sub2.push(item); // 兵书2
      if (item.id === forms.sub_two_book_three) this.books.sub2.push(item); // 兵书2
    });
  },
  methods: {
    openTactic(tactic) {
      this.Popups.Tactic().show(tactic, (path) => {
        this.$router.push(path);
      });
    },
    clickItem() {
      // console.log(JSON.stringify(this.forms, null, 2));
      // localStore.setItem("edit_form", this.forms);
      // this.$router.push("/forms/edit/" + this.forms.id);
    },
    // 跳转战法详情页面
    openTactics(item) {
      // this.$router.push("/tactic/" + item.id);
      this.Popups.Tactic().show(item, (path) => {
        this.$router.push(path);
      });
    },
    openBooks(book) {
      this.Popups.Book().show(book);
    },
    showMore() {
      localStore.setItem("match_heroe", this.heroe);
      this.$router.push({
        path: "/match?name=" + this.heroe.name,
      });
      // this.$router.push("/match/" + this.heroe.name);
    },
    download() {
      window.injectedAll.download();
    },
    collec() {
      this.checkLogin();
      let forms = JSON.parse(JSON.stringify(this.forms));
      forms.is_collected = !forms.is_collected;
      this.api.SET_FORMS_COLL(forms.id, forms.is_collected ? 1 : 0);
      if (!forms.is_collected && this.coll) {
        forms.remove = true;
        return this.$emit("remove");
      }
      if (forms.is_collected) forms.collect_count++;
      else forms.collect_count--;
      this.$emit("change", forms);
    },
    like() {
      this.checkLogin();
      let forms = JSON.parse(JSON.stringify(this.forms));
      forms.is_liked = !forms.is_liked;
      this.api.SET_FORMS_LIKE(forms.id, forms.is_liked ? 1 : 0);
      if (forms.is_liked) forms.like_count++;
      else forms.like_count--;
      this.$emit("change", forms);
    },
    async remove() {
      this.checkLogin();
      await this.api.REMOVE_FORMS(this.forms.id);
      let forms = JSON.parse(JSON.stringify(this.forms));
      forms.remove = true;
      // this.$emit("change", forms);
      this.$emit("remove");
    },
    shareFun() {
      this.$router.push("/forms/" + this.forms.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.team-box {
  background: #f2f2f2;
  border-radius: 5px;
  padding: 0.12rem;
  margin-bottom: 0.12rem;
  position: relative;
  &.download {
    height: 2.2rem;
    overflow: hidden;
    margin-top: 0.24rem;
  }
  .title {
    display: flex;
    align-items: center;
    padding-bottom: 0.13rem;
    img {
      width: 0.2rem;
      height: 0.2rem;
      margin-right: 0.08rem;
      border-radius: 50%;
    }
    font-size: 0.14rem;
    color: #333333;
    .share {
      width: 0.54rem;
      height: 0.22rem;
      border-radius: 0.04rem;
      border: 1px solid #cccccc;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.12rem;
        margin-right: 0.04rem;
      }
      font-size: 0.12rem;
      color: #333333;
    }
  }
  .desc {
    font-size: 0.14rem;
    color: #333333;
    line-height: 0.24rem;
    text-align: justify;
    min-height: 0.24rem;
  }
  .line {
    height: 1px;
    margin: 0.1rem 0;
    background: #d8d8d8;
  }
  .link {
    text-align: right;
    a {
      font-size: 0.14rem;
      color: #507cae;
      line-height: 0.2rem;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .del {
      display: flex;
      align-items: center;
      font-size: 0.12rem;
      color: #8c8c8c;
      ::v-deep {
        svg {
          width: 0.14rem;
          height: 0.14rem;
          margin-right: 0.06rem;
          path {
            fill: #8c8c8c;
          }
        }
      }
    }
    .own {
      width: 0.56rem;
      background: #e5e5e5;
      border-radius: 4px;
      font-size: 0.12rem;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.02rem 0;
      img {
        width: 0.16rem;
        height: 0.16rem;
        margin-right: 0.03rem;
      }
    }
    .status {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: flex-end;
      font-size: 0.12rem;
      color: #8c8c8c;
      cursor: pointer;
      .collec {
        margin-right: 0.18rem;
      }
      .like,
      .collec {
        display: flex;
        align-items: center;
      }
      ::v-deep {
        svg {
          width: 0.14rem;
          height: 0.14rem;
          margin-right: 0.06rem;
          path {
            fill: #8c8c8c;
          }
        }
      }
      .active {
        color: #ff8a69;
        ::v-deep {
          svg {
            path {
              fill: #ff8a69;
            }
          }
        }
      }
    }
  }
  .download-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    padding: 0 0.16rem;
    background: -webkit-gradient(
      linear,
      0% 0%,
      0% 110%,
      from(rgba(255, 255, 255, 0)),
      to(#ffffff),
      color-stop(0.6, #ffffff)
    );
    .btn {
      width: 100%;
      height: 0.4rem;
      background: #ff8a69;
      border-radius: 0.24rem;
      font-size: 0.14rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 0rem;
    }
  }
}
</style>
